@font-face {
    font-family: "PangMenZhengDao";
    src: url('../assets/pangmen.ttf');
    font-weight: normal;
    font-style: normal;
}

/* 若浏览器支持 backdrop-filter，则透明度为 50%，并启用毛玻璃 */
@supports (-webkit-backdrop-filter: blur(30px)) or (backdrop-filter: blur(30px)) {
    .bf-blur {
        background-color: rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(30px);
    }
}

/* 若浏览器器不支持，则使用 MaterialDesign 的风格 */
@supports not ((-webkit-backdrop-filter: blur(30px)) or (backdrop-filter: blur(30px))) {
    .bf-blur {
        background-color: rgba(0, 0, 0, 0.1);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18), 0 6px 10px rgb(0, 0, 0, 0.22);
    }
}

/*
地图弹窗组件的样式
*/
.base-map-pop-panel-container {
    position: relative;
    box-sizing: border-box;
}

.base-map-pop-panel-common-bg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 200%;
    height: 200%;
    border-top: 160px solid transparent;
    border-right: 160px solid transparent;
    border-bottom: 160px solid transparent;
    border-left: 320px solid transparent;
    border-image-source: url('../assets/map-panel.png');
    border-image-slice: 160 160 100 320 fill;
    transform: scale(0.5);
    transform-origin: left top;
}

.base-map-pop-panel-pop-detail {
    width: 100%;
    height: 100%;
}

.base-map-pop-panel-title-line {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 40px;
    padding-right: 10px;
    padding-left: 40px;
    font-family: PangMenZhengDao;
    font-size: 20px;
    font-weight: normal;
    color: var(--dv-color-text-primary);
}

.base-map-pop-panel-title-left {
    display: flex;
    align-items: center;
}

.base-map-pop-panel-close {
    position: relative;
    width: 12px;
    height: 12px;
    cursor: pointer;
}

.base-map-pop-panel-close::before {
    position: absolute;
    top: 0;
    left: 37%;
    width: 2px;
    height: 13px;
    content: "";
    background-color: var(--dv-color-text-primary);
    transform: rotate(45deg);
}

.base-map-pop-panel-close::after {
    position: absolute;
    top: 0;
    left: 37%;
    width: 2px;
    height: 13px;
    content: "";
    background-color: var(--dv-color-text-primary);
    transform: rotate(-45deg);
}

.base-map-pop-panel-content {
    padding: 12px;
}

/*
通用面板组件的样式
*/
.base-panel-container {
    position: absolute;
    box-sizing: border-box;
    width: 400px;
}

.base-panel-common-bg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 200%;
    height: 200%;
    border-top: 160px solid transparent;
    border-right: 160px solid transparent;
    border-bottom: 100px solid transparent;
    border-left: 320px solid transparent;
    border-image-source: url(../assets/panel.png);
    border-image-slice: 160 160 100 320 fill;
    transform: scale(0.5);
    transform-origin: left top;
}

.base-panel-panel-content {
    width: 100%;
    height: 100%;
}

.base-panel-top-title {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 40px;
    padding-right: 12px;
    padding-left: 40px;
}

.base-panel-text-box {
    display: flex;
    align-items: center;
    font-family: PangMenZhengDao;
    font-size: 20px;
    font-weight: normal;
    color: var(--dv-color-text-primary);
}

.base-panel-content {
    padding: 12px;
}

.base-panel-checked {
    outline: 1px solid var(--dv-color-index);
    box-shadow: inset 0 0 10px 0 var(--dv-color-index);
}

/*
通用弹窗组件的样式
*/
.base-pop-panel-pop-container {
    position: absolute;
    z-index: 4;
    max-height: 800px;
    padding: 1px;
}

.base-pop-panel-pop-container.left {
    left: 420px;
}

.base-pop-panel-pop-container.right {
    right: 420px;
}

.base-pop-panel-pop-container.center {
    left: 50%;
    transform: translateX(-50%);
}

.base-pop-panel-common-bg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 200%;
    height: 200%;
    border-top: 160px solid transparent;
    border-right: 160px solid transparent;
    border-bottom: 160px solid transparent;
    border-left: 320px solid transparent;
    border-image-source: url(../assets/pop-panel.png);
    border-image-slice: 160 160 160 320 fill;
    transform: scale(0.5);
    transform-origin: left top;
}

.base-pop-panel-pop-detail {
    width: 100%;
    height: 100%;
}

.base-pop-panel-title-line {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 40px;
    padding-right: 10px;
    padding-left: 40px;
    font-family: PangMenZhengDao;
    font-size: 20px;
    font-weight: normal;
    color: var(--dv-color-text-primary);

}

.base-pop-panel-title-left {
    display: flex;
    align-items: center;
}

.base-pop-panel-close {
    position: relative;
    width: 12px;
    height: 12px;
    cursor: pointer;
}

.base-pop-panel-close::before {
    position: absolute;
    top: 0;
    left: 37%;
    width: 2px;
    height: 13px;
    content: "";
    background-color: var(--dv-color-text-primary);
    transform: rotate(45deg);
}

.base-pop-panel-close::after {
    position: absolute;
    top: 0;
    left: 37%;
    width: 2px;
    height: 13px;
    content: "";
    background-color: var(--dv-color-text-primary);
    transform: rotate(-45deg);
}

.base-pop-panel-content {
    padding: 12px;
}

/*
背景组件的样式
*/
.layout-bg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-image: url(../assets/layout.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}